<template>
	<view>
		<view class="header status_bar" :class="scrrol == true ? 'scrrolHeader' : ''">
			<view class="back iconfont" @tap="backPage">&#xe779;</view>
			<view class="text">{{ stateTitle }}</view>
		</view>
		<view class="bg_box">
			<image class="bg01" src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/bg01.png" mode="widthFix">
			</image>
			<view class="content">
				<!-- <view class="state_box">
					<view class="text_box">
						<view class="title">{{ stateTitle }}</view>
					</view>
				</view> -->
				<view class="tick_box">
					<view class="tick iconfont icon-kongxinduigou" v-if="info.created_at"></view>
					<view class="line" v-if="info.connect_time"></view>
					<view class="tick iconfont icon-kongxinduigou" v-if="info.connect_time"></view>
					<view class="line" v-if="info.receipt_time"></view>
					<view class="tick iconfont icon-kongxinduigou" v-if="info.receipt_time"></view>
				</view>
				<view class="state_box">
					<view class="text_box" v-if="info.created_at">
						<view class="text">{{info.created_at}}</view>
						<view class="text">下单时间</view>
					</view>
					<view class="text_box" v-if="info.connect_time">
						<view class="text">{{info.connect_time}}</view>
						<view class="text">接单时间</view>
					</view>
					<view class="text_box" v-if="info.receipt_time">
						<view class="text">{{info.receipt_time}}</view>
						<view class="text">完成时间</view>
					</view>
				</view>

				<view class="list_box">
					<view class="list">
						<view class="title">配送信息</view>
						<view class="text"></view>
					</view>
					<view class="list" v-if="info.service_id == 3">
						<view class="title">配送时间</view>
						<view class="text">{{ info.estimate_time }}</view>
					</view>
					<!-- <view class="list" v-if="state == 1||state == 2 || state == 3|| state == 4||state == 5">
            <view class="title">客户姓名</view>
            <view class="text">{{ info.receive_name }}</view>
          </view> -->
					<!-- <view class="list">
            <view class="title">客户电话</view>
            <view class="text">{{ info.receive_tel | filterPhoneNumber }}</view>
          </view> -->
					<view class="list" v-if="info.service_id != 4">
						<view class="title">收件地址</view>					
						<view class="text">{{ info.receive_area }} {{ info.receive_address}}</view>
						<!-- <view class="copy iconfont icon-fuzhi" :data-value01="info.receive_area"
							:data-value02="info.receive_address" @tap="setValue" v-if="info.service_id == 6"></view> -->
					</view>
					<view class="list" v-if="info.service_id == 6">
						<view class="title">收件人姓名</view>
						<view class="text">{{ info.receive_name }}</view>
						<!-- <view class="copy iconfont icon-fuzhi" :data-value01="info.receive_name" data-value02="" @tap="setValue"></view> -->
					</view>
					<view class="list" v-if="info.service_id == 6">
						<view class="title">收件人电话</view>
						<view class="text">{{ info.receive_tel }}</view>
						<!-- <view class="copy iconfont icon-fuzhi" :data-value01="info.receive_tel" data-value02="" @tap="setValue"></view> -->
					</view>
					<view class="copyBtn" v-if="info.service_id == 6" @click="copyText('receive')">复制收件地址</view>
					<view class="list" v-if="info.errands_type != 2&&info.f_address != 1">
						<view class="title" v-if="info.service_id == 8">购买地址</view>
						<view class="title" v-if="info.service_id != 8">取件地址</view>
						<view class="text">{{ info.fetch_area }} {{ info.fetch_address}}</view>
						<!-- <view class="copy iconfont icon-fuzhi" :data-value01="info.fetch_area" :data-value02="info.fetch_address" @tap="setValue" v-if="info.service_id == 6"></view> -->
					</view>
					<view class="list" v-if="info.errands_type != 2">
						<view class="title" v-if="info.service_id == 8||info.service_id == 3">收货人名称</view>
						<view class="title" v-if="info.service_id == 4||info.service_id == 6">取件人名称</view>
						<view class="text">{{ info.fetch_name }}</view>
						<!-- <view class="copy iconfont icon-fuzhi" :data-value01="info.fetch_name" data-value02="" @tap="setValue" v-if="info.service_id == 6"></view> -->
					</view>
					<view class="list" v-if="info.errands_type != 2">
						<view class="title" v-if="info.service_id == 8||info.service_id == 3">收货人电话</view>
						<view class="title" v-if="info.service_id == 4||info.service_id == 6">取件人电话</view>
						<view class="text">{{ info.fetch_tel }}</view>
						<!-- <view class="copy iconfont icon-fuzhi" :data-value01="info.fetch_tel" data-value02="" @tap="setValue" v-if="info.service_id == 6"></view> -->
					</view>
					<view class="copyBtn" v-if="info.service_id == 6" @click="copyText('fetch')">复制取件地址</view>
				</view>


				<view class="list_box" v-if="info.f_address == 1&&info.service_id == 3">
					<view class="list">
						<view class="title">取件地址</view>
						<view class="text"></view>
					</view>
					
					<block v-for="(item, index) in info.fetch_address" :key="index" v-if="info.order_status == 3||info.order_status == 7">
						<view class="address_list">
							<view class="title">{{item.fetch_address}}</view>
							<view class="address_img" v-if="info.service_id == 3&&info.order_status == 3">
								<view class="address_text">图片凭证</view>
								<image :src="item.finish_image" mode="scaleToFill" :data-id="item.id" @tap="setAddressImg"></image>
								<view class="see iconfont icon-see" :data-img="item.finish_image"
							@tap.stop="openPreviewImage"></view>
							</view>
							<view class="address_img" v-if="info.service_id == 3&&info.order_status == 7">
								<view class="address_text">图片凭证</view>
								<image :src="item.finish_image" mode="scaleToFill"></image>
								<view class="see iconfont icon-see" :data-img="item.finish_image"
							@tap.stop="openPreviewImage"></view>
							</view>							
							<view class="code_box" v-for="(item02, index02) in item.code">
								<view class="code">取件码:{{item02.txt}}</view>
								<view class="type" :data-code="item02.txt" :data-status="1" :data-id="item.id" @tap="setExpressageType"
									v-if="item02.status == 0">未取</view>
								<view class="type02" :data-code="item02.txt" :data-status="0" :data-id="item.id" @tap="setExpressageType"
									v-if="item02.status == 1">已取</view>
							</view>
						</view>
					</block>
					<block v-for="(item, index) in info.fetch_address" :key="index" v-if="info.order_status == 4 || info.order_status == 2">
						<view class="address_list">
							<view class="title">{{item.fetch_address}}</view>
							<view class="address_img">
								<view class="address_text">图片凭证</view>
								<image :src="item.finish_image" mode="scaleToFill"></image>
								<view class="see iconfont icon-see" :data-img="item.finish_image"
							@tap.stop="openPreviewImage"></view>
							</view>	
							<view class="code_box" v-for="(item02, index02) in item.code">
								<view class="code">取件码:{{item02.txt}}</view>
								<view class="type" v-if="item02.status == 0">未取</view>
								<view class="type02" v-if="item02.status == 1">已取</view>
								<view class="type02" v-if="item02.status == 2">无包裹</view>
							</view>
						</view>
					</block>
					<!-- <view class="list" v-if="info.service_id == 3&&info.order_status == 3">
						<view class="title">图片凭证</view>
						<image :src="addImg" mode="scaleToFill" @tap="getImg"></image>
					</view> -->
				</view>
				
				

				<view class="goods_content">
					<view class="goods_box">
						<image class="goods_img" :src="info.thumb" mode="scaleToFill"></image>
						<view class="text_box">
							<view class="title">{{ info.service_name }}</view>
							<view class="money_box" v-if="info.service_id != 6">
								<view class="money">
									<view class="b">
										<image src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/coin02.png"
											mode="widthFix"></image>
									</view>
									-{{ info.coupon_num }}
								</view>
								<view class="num">x{{info.num}}</view>
							</view>
							<view class="money_box" v-if="info.service_id == 6">
								<view class="money">
									<view class="b">
										<image src="https://cxh-imgs.oss-cn-shanghai.aliyuncs.com/static/new/coin02.png"
											mode="widthFix"></image>
									</view>
									+{{ info.coupon_num }}
								</view>
								<view class="num">x{{info.num}}</view>
							</view>
							<view class="actual_box" v-if="info.service_id == 6">
								<view class="num">共{{info.num}}次服务</view>
								<view class="text">获得劵</view>
								<view class="actual">{{ info.coupon_num }}张</view>
							</view>
							<view class="actual_box" v-if="info.service_id != 6">
								<view class="num">共{{info.num}}次服务</view>
								<view class="text">消耗件劵</view>
								<view class="actual">{{ info.coupon_num }}张</view>
							</view>
						</view>
					</view>

					<!-- <view class="menu_box">
            <view class="menu" v-if="info.order_status == 1">去支付</view>
            <view class="menu" v-if="info.order_status == 2" @click="remaind" :data-id="info.id">提醒接单</view>
            <view class="menu" v-if="info.order_status == 3"  @click="reminder" :data-id="info.id">催单</view>
            <view class="menu menu02" v-if="info.order_status == 1" @click="cancel" :data-id="info.id">取消订单</view>
            <view class="menu" v-if="info.order_status == 4||info.order_status == 6" :data-url="'/pages/personalcenter/member/order?id='+info.service_id"  @click="gotopage">再来一单</view>
          </view> -->
				</view>

				<view class="list_box">
					<view class="list" style="margin-bottom: 1vw;">
						<view class="title">订单信息</view>
						<view class="text"></view>
					</view>
					<view class="list" v-if="state == 1||state == 2 || state == 3|| state == 4||state == 5">
						<view class="title">订单编号</view>
						<view class="text">{{ info.order_no }}</view>
					</view>
					<view class="list" v-if="state == 1||state == 2 || state == 3|| state == 4||state == 5">
						<view class="title">下单时间</view>
						<view class="text">{{ info.created_at }}</view>
					</view>
					<view class="list"
						v-if="state == 1&&info.receipt_time||state == 2&&info.receipt_time || state == 3&&info.receipt_time|| state == 4&&info.receipt_time||state == 5&&info.receipt_time">
						<view class="title">订单完成时间</view>
						<view class="text">{{ info.receipt_time }}</view>
					</view>
					<!-- <view class="list" v-if="info.service_id == 2">
						<view class="title">具体重量</view>
					 <view class="text">{{info.weight}}kg</view>
					</view> -->
					<view class="list" v-if="info.service_id == 2">
						<view class="title">预约时间</view>
						<view class="text">{{info.estimate_time}}</view>
					</view>
					<!-- <view class="list" v-if="info.service_id == 3">
						<view class="title">取件码</view>
					 <view class="text">{{info.picking_code}}</view>
					</view> -->
					<view class="list" v-if="info.finish_image">
						<view class="title">物品图片</view>
						<image :src="info.finish_image" mode="scaleToFill" :data-img="info.finish_image"
							@tap.stop="openPreviewImage"></image>
					</view>
					<view class="list" v-if="info.take_image">
						<view class="title" v-if="info.service_id != 4">取件图片</view>
						<view class="title" v-if="info.service_id == 4">物品图</view>
						<image :src="info.take_image" mode="scaleToFill" :data-img="info.take_image"
							@tap.stop="openPreviewImage"></image>
					</view>
					<view class="list" v-if="info.express_image">
						<view class="title" v-if="info.service_id == 6">小票图片</view>
						<view class="title" v-if="info.service_id == 3">送达图片</view>
						<view class="title" v-if="info.service_id == 8">小票图片</view>
						<image :src="info.express_image" mode="scaleToFill" :data-img="info.express_image"
							@tap.stop="openPreviewImage"></image>
					</view>
					<view class="list" v-if="info.logistics_no">
						<view class="title" v-if="info.service_id == 6">快递单号</view>						
						<view class="text">{{ info.logistics_no }}</view>
					</view>
					<view class="list" v-if="info.logistics_name">
						<view class="title" v-if="info.service_id == 6">快递公司</view>						
						<view class="text">{{ info.logistics_name }}</view>
					</view>
					<view class="list" v-if="info.express_fee > 0">
						<view class="title" v-if="info.service_id == 6">实收快递费</view>
						<view class="title" v-if="info.service_id == 8">实际商品金额</view>
						<view class="text">￥{{ info.express_fee }}</view>
					</view>
					<view class="list" v-if="info.estimate_price > 0">
						<view class="title" v-if="info.service_id == 6">预估快递费</view>
						<view class="title" v-if="info.service_id == 8">预估商品费</view>
						<view class="text">￥{{ info.estimate_price }}</view>
					</view>

					<!-- <view class="list" v-if="info.service_id != 4 && info.service_id != 2">
						<view class="title">验证码</view>
					 <view class="text">{{info.verification_code}}</view>
					</view> -->
					<!-- <view class="list">
						<view class="title">支付方式</view>
						<view class="text"  v-if="info.payment_name=='wechat'">微信支付</view>
            <view class="text"  v-if="info.payment_name=='alipay'">支付宝支付</view>
					</view> -->
					<view class="list" v-if="info.goods_name">
						<view class="title">物品</view>
						<view class="text" v-if="info.service_id == 6">{{ info.goods_name }}kg</view>
						<view class="text" v-if="info.service_id != 6">{{ info.goods_name }}</view>
					</view>
					<!-- <view class="list">
						<view class="title">附图</view>
						<image :src="info.image" mode="scaleToFill" :data-img="info.image" @tap.stop="openPreviewImage"></image>
					</view> -->
					<view class="list">
						<view class="title">备注</view>
						<view class="text">{{ info.remark }}</view>
					</view>
				</view>
				
				


				<view class="c_b_msg2" style="margin-bottom: 4%;">
					<!-- <view class="c_b_m_btn" @tap="contact"><i class="iconfont icon"></i>订单投诉</view> -->
					<view class="c_b_m_btn" v-if="info.delivery_info" :data-phone="info.delivery_info.phone"
						:data-id="info.delivery_user_id" :data-name="info.delivery_info.nickname" @tap="sceltaContatto">
						<i class="iconfont icon"></i>
						联系配送员
					</view>

				</view>
				
				<view class="list_box" v-if="info.express_status == 2">
					<view class="list">
						<view class="title">需要修改小票和实收快递费</view>
						<view class="text"></view>
					</view>
					<view class="list">
						<view class="title">实收快递费</view>
						<input type="text" value="" placeholder="请输入要修改的实收快递费" v-model="editFreight" />
					</view>
					<view class="list">
						<view class="title">新的小票图片</view>
						<image :src="addImg02" mode="scaleToFill" @tap="getImg02"></image>
					</view>
					<view class="confirm02" @tap="setOther">提交</view>
				</view>


				<view class="clear_box"></view>

			</view>
		</view>


		<view class="confirm" v-if="info.f_address == 1&&info.service_id == 3&&info.order_status == 3"
			@tap="goGetGoods">确认取货</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrrol: false,
				state: '',
				stateTitle: '',
				info: '',
				addImg: 'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png',
				addImg02: 'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png',
				editFreight:'',
			};
		},
		filters: {
			filterPhoneNumber(phoneNumber) {
				let reg = /^1[3456789]{1}\d{9}$/ //必须是以1开头，第二位必须是3-9中的任意一个数，后面9位必须是数字
				//校验手机号是否正确
				if (reg.test(phoneNumber)) {
					phoneNumber = phoneNumber.toString() //先强制转换成字符串类型
					return phoneNumber.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
				} else {
					return ''
				}

			}
		},
		onLoad(e) {
			this.state = e.state;
			let state = e.state;
			if (state == 1) {
				this.stateTitle = '待付款';
			} else if (state == 2) {
				this.stateTitle = '已付款';
			} else if (state == 3) {
				this.stateTitle = '待上门';
			}
			/*else if (state == 4) {
			this.stateTitle = '待评价';
		}*/
			else if (state == 7) {
				this.stateTitle = '服务中';
			} else if (state == 4) {
				this.stateTitle = '已完成';
			} else if (state == 0) {
				this.stateTitle = '取消';
			}
			let that = this;
			that.serviceId = e.id;
			that.loadInfo();
		},
		methods: {
			copyText(_type){
				let copyMsg = '';
				if(_type == 'receive'){
					//收件
					copyMsg = this.info.receive_area + this.info.receive_address + '\n' + this.info.receive_name + '\n' + this.info.receive_tel;
				}else if(_type == 'fetch'){
					//取件
					copyMsg = this.info.fetch_area + this.info.fetch_address + '\n' + this.info.fetch_name + '\n' + this.info.fetch_tel;
				}
				uni.setClipboardData({
					data: copyMsg, //当前点击的地址
					success: () => {
						uni.showToast({
							title: '复制成功'
						})
					}
				});
			},
			setOther(){
				var that = this;
				if(that.addImg02 == 'https://jiheshenhuo.oss-cn-hangzhou.aliyuncs.com/static/li/addimg.png'){
					that.addImg02 = '';
				}
				that.Net._post('terminal/update_express', {
					order_id: that.serviceId,
					express_fee: that.editFreight,
					express_image:that.addImg02,
				}, res => {
					if (res.code == 200) {
						that.Msg.Success('修改成功', res => {
					 	that.loadInfo();
						});
					}
				});
			},
			setValue(e) {
				var that = this;
				let value = e.currentTarget.dataset.value01 + e.currentTarget.dataset.value02;
				uni.setClipboardData({
					data: value, //当前点击的地址
					success: () => {
						//获取刚复制好的地址到剪切板，
						uni.getClipboardData({
							success: () => {
								uni.showToast({
									title: '复制成功'
								})
							}
						});
					}
				});
			
			},
			goGetGoods() {
				var that = this;
				uni.showModal({
					title: '提示',
					content: '是否确认取货',
					success: function(res) {
						if (res.confirm) {
							that.Net._post('terminal/pickup_finish', {
								order_id: that.serviceId
							}, res => {
								if (res.code == 200) {
									that.Msg.Success('取货成功', res => {
								 	that.loadInfo();
									});
								}
							});
						} else if (res.cancel) {
							//console.log('用户点击取消');
						}
					}
				});

			},
			setAddressImg(e){
				let that = this;
				let id_ = e.currentTarget.dataset.id;
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
					success: function(res) {
						const temFilePath = res.tempFilePaths; //图片选择完成后 获取该图片的路劲
						uni.compressImage({
							src: temFilePath[0],
							quality: 30,
							success: res => {
								//console.log(res.tempFilePath)
								uni.uploadFile({
									url: that.Cfg.Setting.root +
									'uploads', //上传文件的Controller
									filePath: res.tempFilePath, //要上传的文件路径
									name: 'file',
									success: res => {
										//console.log(JSON.parse(res.data))
										let imgData = JSON.parse(res.data);
										that.Net._post('terminal/upload_credentials', {
											order_id: that.serviceId,
											finish_image: imgData.data.data,
											station_id:id_,
										}, res => {
											if (res.code == 200) {
												that.loadInfo();
											}
										});
									}
								});
							}
						})
				
				
					}
				});
			},
			getImg() {
				let that = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
					success: function(res) {
						const temFilePath = res.tempFilePaths; //图片选择完成后 获取该图片的路劲
						uni.compressImage({
							src: temFilePath[0],
							quality: 30,
							success: res => {
								//console.log(res.tempFilePath)
								uni.uploadFile({
									url: that.Cfg.Setting.root +
									'uploads', //上传文件的Controller
									filePath: res.tempFilePath, //要上传的文件路径
									name: 'file',
									success: res => {
										//console.log(JSON.parse(res.data))
										let imgData = JSON.parse(res.data);
										that.addImg = imgData.data.data;
										that.Net._post('terminal/upload_credentials', {
											order_id: that.serviceId,
											finish_image: that.addImg,
										}, res => {
											if (res.code == 200) {
												that.loadInfo();
											}
										});
									}
								});
							}
						})


					}
				});
			},
			getImg02() {
				let that = this;
				uni.chooseImage({
					sizeType: ['original', 'compressed'], //可选择原图或压缩后的图片
					sourceType: ['album', 'camera'], //可选择性开放访问相册、相机
					success: function(res) {
						const temFilePath = res.tempFilePaths; //图片选择完成后 获取该图片的路劲
						uni.compressImage({
							src: temFilePath[0],
							quality: 30,
							success: res => {
								//console.log(res.tempFilePath)
								uni.uploadFile({
									url: that.Cfg.Setting.root +
									'uploads', //上传文件的Controller
									filePath: res.tempFilePath, //要上传的文件路径
									name: 'file',
									success: res => {
										//console.log(JSON.parse(res.data))
										let imgData = JSON.parse(res.data);
										that.addImg02 = imgData.data.data;
										
									}
								});
							}
						})
			
			
					}
				});
			},
			setExpressageType(e) {
				var that = this;
				let code_ = e.currentTarget.dataset.code;
				let status_ = e.currentTarget.dataset.status;
				let id_ = e.currentTarget.dataset.id;
				that.Net._post('terminal/pickup_status', {
					order_id: that.serviceId,
					txt: code_,
					status: status_,
					station_id: id_,
				}, res => {
					if (res.code == 200) {
						that.loadInfo();
					}
				});

			},
			sceltaContatto(e) { //联系
				var that = this;
				let phone_ = e.currentTarget.dataset.phone;
				let touid_ = e.currentTarget.dataset.id;
				let nickname_ = e.currentTarget.dataset.name;
				uni.showActionSheet({
					itemList: ['电话'],
					success: function(res) {
						//console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						//console.log(res.tapIndex);
						if (res.tapIndex == 0) {
							// let url = '/pages/news/service?id=' + touid_ + '&title=' + nickname_;
							// uni.navigateTo({
							// 	url: url
							// });
							that.Net._get('bind_phone', {
								phone: phone_
							}, res => {
								if (res.code == 200) {
									//console.log(res)
									uni.makePhoneCall({
										phoneNumber: res.data //仅为示例
									});
								}
							});
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			openPreviewImage(e) {
				let that = this;
				let img_ = e.currentTarget.dataset.img;
				//console.log(img_)
				uni.previewImage({
					urls: [img_],
					longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
						},
						fail: function(err) {
							console.log(err.errMsg);
						}
					}
				});
			},
			backPage() {
				uni.navigateBack({});
			},
			gotopage(e) {
				let url = e.currentTarget.dataset.url;
				uni.navigateTo({
					url: url
				});
			},
			loadInfo() {
				let that = this;
				that.Net._get('user/vip/order_detail/' + that.serviceId, {}, res => {
					if (res.code == 200) {
						that.info = res.data;
					}
				});
			},
		},
		onPageScroll: function(Object) {
			//console.log(Object.scrollTop); //实时获取到滚动的值
			if (Object.scrollTop > 28) {
				this.scrrol = true;
				/* #ifdef APP-PLUS */
				plus.navigator.setStatusBarStyle('light');
				/* #endif */
			} else if (Object.scrollTop < 28) {
				this.scrrol = false;
				/* #ifdef APP-PLUS */
				plus.navigator.setStatusBarStyle('dark');
				/* #endif */
			}
		}
	};
</script>

<style>
	.header {
		background-color: transparent;
	}

	.header .text {
		background-color: transparent;
		color: #fff;
	}

	.header .back {
		color: #fff;
	}

	.scrrolHeader {
		background-color: #ff6900 !important;
	}

	.bg_box {
		width: 100%;
		position: relative;
	}

	.bg_box .bg01 {
		width: 100%;
	}

	.bg_box .content {
		width: 92%;
		position: absolute;
		top: calc(13.5vw + var(--status-bar-height));
		left: calc(50% - 46%);
	}
	
	.tick_box{
		width: 70%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 6vw;
	}
	
	.tick_box .tick{
		font-size: 6vw;
		color: #fff;
		text-align: center;
	}
	
	.tick_box .line{
		flex: 1;
		background-color: #fff;
		height: 1px;
	}

	.bg_box .content .state_box {
		width: 96%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		margin-bottom: 5vw;
	}

	.bg_box .content .state_box .icon {
		font-size: 14vw;
		color: #fff;
		width: 18vw;
		text-align: right;
	}

	.bg_box .content .state_box .text_box {
		flex: 1;
	}

	.bg_box .content .state_box .time {
		flex: 1;
		font-size: 3.5vw;
		color: #fff;
	}

	.bg_box .content .state_box .text_box .title {
		font-size: 5vw;
		color: #fff;
	}

	.bg_box .content .state_box .text_box .text {
		font-size: 3.5vw;
		color: #fff;
		margin-top: 2vw;
		text-align: center;
	}

	.bg_box .content .address {
		width: 100%;
		background-color: #fff;
		padding: 3vw;
		border-radius: 1.5vw;
		display: flex;
		margin-top: 3vw;
	}

	.bg_box .content .address .icon {
		width: 10vw;
		height: 10vw;
		border-radius: 50%;
		text-align: center;
		line-height: 10vw;
		color: #fff;
		margin-right: 3vw;
		font-size: 5vw;
		margin-top: 3vw;
	}

	.icon_w {
		background-color: #2898f6;
	}

	.icon_d {
		background-color: #FF7F22;
	}


	.bg_box .content .address .text_box {
		flex: 1;
	}

	.bg_box .content .address .text_box .title {
		font-size: 3.5vw;
		min-height: 10.5vw;
		color: #2898f6;
		line-height: 5vw;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.bg_box .content .address .text_box .time {
		font-size: 3vw;
		color: #999;
		margin-top: 2vw;
	}

	.bg_box .content .address .text_box .name_box {
		display: flex;
	}

	.bg_box .content .address .text_box .name_box .name {
		font-size: 3.5vw;
		color: #333;
		line-height: 6vw;
	}

	.bg_box .content .address .text_box .name_box .phone {
		font-size: 3vw;
		color: #999;
		line-height: 6vw;
		margin-left: 1.5vw;
	}

	.bg_box .content .address .text_box .text {
		color: #666;
		font-size: 3.2vw;
		line-height: 5vw;
		min-height: 10.5vw;
	}



	.bg_box .content .address .arrow {
		width: 10.5vw;
		font-size: 3.5vw;
		color: #cccccc;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}

	.goods_content {
		width: 100%;
		margin: 0 auto;
		background: #fff;
		border-radius: 1.5vw;
		margin-top: 3%;
		padding: 2vw 0;
	}

	.goods_content .order_box {
		width: 100%;
		height: 8vw;
		display: flex;
	}

	.goods_content .order_box .shop {
		font-size: 3.5vw;
		color: #666;
		flex: 1;
		display: flex;
		margin-left: 3vw;
		line-height: 8vw;
	}

	.goods_content .order_box .shop .icon {
		font-size: 5vw;
		margin-right: 1.5vw;
		font-weight: 400;
	}

	.goods_content .order_box .state {
		font-size: 3.5vw;
		color: #ff5301;
		margin-right: 3vw;
		line-height: 8vw;
	}

	.goods_content .goods_box {
		width: 100%;
		margin-top: 3vw;
		display: flex;
	}

	.goods_content .goods_box .goods_img {
		width: 24vw;
		height: 24vw;
		border-radius: 2vw;
		margin: 0 3vw;
	}

	.goods_content .goods_box .text_box {
		flex: 1;
		margin-right: 3vw;
	}

	.goods_content .goods_box .text_box .title {
		height: 11vw;
		font-size: 3.5vw;
		color: #333;
		line-height: 6vw;
		flex: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}

	.goods_content .goods_box .text_box .money_box {
		display: flex;
		margin-top: 1vw;
	}

	.content .goods_box .text_box .money_box .money {
		font-size: 3.5vw;
		color: #FF7F22;
		line-height: 6vw;
		flex: 1;
		display: flex;
		align-items: center;
	}

	.content .goods_box .text_box .money_box .money .b {
		width: 6vw;
		margin-right: 0.5vw;
	}

	.content .goods_box .text_box .money_box .money .b image {
		width: 100%;
	}

	.goods_content .goods_box .text_box .money_box .num {
		font-size: 3vw;
		color: #999;
		flex: 1;
		text-align: right;
		line-height: 6vw;
	}

	.goods_content .goods_box .text_box .actual_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 1vw;
	}

	.goods_content .goods_box .text_box .actual_box .num {
		font-size: 3vw;
		color: #999;
		line-height: 6vw;
		margin-right: 2vw;
	}

	.goods_content .goods_box .text_box .actual_box .text {
		font-size: 3vw;
		color: #333;
		line-height: 6vw;
		margin-right: 1vw;
	}

	.goods_content .goods_box .text_box .actual_box .actual {
		font-size: 3.5vw;
		color: #FD3633;
		line-height: 6vw;
	}

	.goods_content .menu_box {
		width: 96%;
		margin: 0 auto;
		height: 13.5vw;
		display: flex;
		justify-content: flex-end;
		position: relative;
	}

	.goods_content .menu_box .menu {
		width: 24vw;
		height: 8vw;
		background-color: #FF7F22;
		box-sizing: border-box;
		margin-top: 3vw;
		margin-left: 2vw;
		border-radius: 1.5vw;
		line-height: 7.5vw;
		text-align: center;
		font-size: 3.5vw;
		color: #fff;

	}

	.goods_content .menu_box .menu02 {
		border: 1px solid #999 !important;
		color: #999 !important;
		background-color: transparent !important;
	}

	.content .menu_box .menu03 {
		position: absolute;
		left: 0.3vw;
		display: flex;
	}

	.goods_content .menu_box .menu03 .i {
		font-size: 6vw;
		color: #f72f4b;
		line-height: 13.5vw;
		margin-right: 1.5vw;
	}

	.goods_content .menu_box .menu03 .t {
		font-size: 3vw;
		color: #333;
		line-height: 13.5vw;
	}

	.goods_content .menu_box .reward {
		position: absolute;
		left: 1vw;
		top: 0;
		display: flex;
	}

	.goods_content .menu_box .reward .icon {
		width: 8vw;
		display: flex;
		align-items: center;
	}

	.goods_content .menu_box .reward .icon image {
		width: 100%;
	}

	.goods_content .menu_box .reward .text {
		font-size: 3vw;
		color: #999;
		line-height: 13.5vw;
		margin: 0 1vw 0 1.5vw
	}

	.goods_content .menu_box .reward .money {
		font-size: 3vw;
		color: #FF5301;
		line-height: 13.5vw;
	}

	.list_box {
		width: 100%;
		margin: 3vw auto 0;
		background-color: #fff;
		border-radius: 1.5vw 1.5vw 0 0;
		padding-bottom: 3vw;
	}

	.list_box .address_list {
		width: 90%;
		margin: 0 auto;
	}

	.list_box .address_list .title {
		font-size: 4vw;
		color: #333;
		height: 10vw;
		display: flex;
		align-items: center;
		font-weight: bold;
	}
	
	.list_box .address_list .address_img{
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.list_box .address_list .address_img .address_text{
		flex: 1;
		font-size: 3.5vw;
		color: #333;
	}
	
	.list_box .address_list .address_img image{
		width: 15vw;
		height: 15vw;
		border-radius: 1vw;
		margin-top: 0vw;
		margin-bottom: 2vw;
	}
	
	.list_box .address_list .address_img .see{
		font-size: 6vw;
		color: #999;
		margin-left: 3vw;
	}

	.list_box .address_list .code_box {
		width: 100%;
		background-color: #f5f5f5;
		height: 10vw;
		display: flex;
		align-items: center;
		padding: 0 2vw;
		border-radius: 2vw;
		margin-bottom: 3vw;
	}

	.list_box .address_list .code_box:nth-child {
		margin-bottom: 0;
	}

	.list_box .address_list .code_box .code {
		font-size: 3.5vw;
		color: #333;
		flex: 1;
	}

	.list_box .address_list .code_box .type {
		font-size: 3.2vw;
		color: #fff;
		border-radius: 1vw;
		background-color: #FF9822;
		height: 6vw;
		line-height: 6vw;
		padding: 0 2vw;
	}

	.list_box .address_list .code_box .type02 {
		font-size: 3.2vw;
		color: #fff;
		border-radius: 1vw;
		background-color: #999;
		height: 6vw;
		line-height: 6vw;
		padding: 0 2vw;
	}
	
	.list_box .copyBtn{
		width: 34%;
		margin-left: 63%;
		border-radius: 15rpx;
		line-height: 7vw;
		height: 7vw;
		text-align: center;
		background: #FF7F22;
		color: #ffffff;
		font-size: 3.5vw;
		margin-bottom: 3vw;
	}

	.list_box .list {
		width: 94%;
		margin: 0 auto;
		display: flex;
		align-items: flex-start;
		background-color: #fff;
	}

	.list_box .list:nth-child(1) {
		border-bottom: 1px solid #f5f5f5;
	}

	.list_box .list .title {
		color: #333;
		font-size: 3.2vw;
		line-height: 9vw;
		flex: 1;
	}

	.list_box .list:nth-child(1) .title {
		font-weight: bold;
		color: #333;
		font-size: 3.5vw;
	}

	.list_box .list .text {
		color: #999;
		font-size: 3.2vw;
		line-height: 9vw;
		flex: 1;
		text-align: right;
	}
	
	.list_box .list input {
		color: #333;
		font-size: 3.5vw;
		line-height: 9vw;
		flex: 1;
		text-align: right;
	}

	.list_box .list image {
		width: 15vw;
		height: 15vw;
		border-radius: 1vw;
		margin-top: 1vw;
		margin-bottom: 1vw;
	}
	
	.list_box .list .copy {
		color: #333;
		font-size: 5vw;
		line-height: 9vw;
		margin-left: 3vw;
	
	}

	.contact_box {
		width: 100%;
		background-color: #e8e8e8;
		border-radius: 0 0 3vw 3vw;
		height: 12vw;
		line-height: 12vw;
		text-align: center;
		font-size: 3.5vw;
		color: #333;
		margin-bottom: 20vw;
	}

	.c_b_msg2 {
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		display: flex;
		padding: 2vw 0;
		background-color: #fff;
		border-radius: 0 0 2vw 2vw;
	}

	.c_b_m_btn {
		flex: 1;
		align-items: center;
	}

	.c_b_m_btn:not(:first-child) {
		border-left: 1rpx solid #f3f3f3;
	}

	.icon {
		font-size: 35rpx;
		padding-right: 10rpx;
	}

	.confirm {
		width: 92%;
		bottom: 3vw;
		left: calc(50% - 46%);
	}
	
	.confirm02{
		width: 92%;
		margin: 0 auto;
		height: 10vw;
		line-height: 10vw;
		margin-top: 3vw;
	}
</style>
